<template>
  <el-row class="order_table_main" :gutter="20">

    <div>
      <el-col v-for="(item,index) in tableData" :key="index" class="item" :span="6" :offset="0">
        <span>{{ item.key }}:</span>
        <span :class="{text:true,changeColor:item.key.indexOf('金额')!==-1}">{{ item.value }}</span>
        <el-button v-if="item.orderId" type="text" style="font-size:14px;margin-left:15px" size="small" @click="goDetail(item)">查看订单详情</el-button>

      </el-col>
    </div>

  </el-row>
</template>

<script>
export default {
    props: {
        tableData: {
            type: Array,
            default() {
                return []
            }
        }
    },
    data() {
        return {}
    },
    created() {
    },
    mounted() {},
    methods: {
        goDetail(item) {
            this.$router.push({ name: 'orderDetail', params: { id: item.orderId }})
        }
    }
}
</script>

<style scoped lang="scss">
.order_table_main {
  padding-bottom: 10px;
  // border-bottom: 1px solid orange;
  color: #393c3e;
  .item{
    display: flex;

    height: 40px;
    line-height: 40px;
    font-size: 14px;
    .text{
      margin-left: 10px;
    }
    .changeColor{
      color: red;
    }
  }
}
</style>
